<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<title>Javascript 二维码生成库：QRCode</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/qrcode.min.js"></script>
<script type="text/javascript" src="./js/html2canvas.min.js"></script>
</head>
<body>
<!--这里是边框尺寸，边框宽度，边框颜色，自定义！-->
    <div id="canva" style="width: 255px;height: 285px;border:20px solid #ffffff;">
        <!--这里准备放二维码照片-->
        <div id="qrCodeImg"></div>
        <!--这里是描述性关键文字，设置样式-->
        <div style="text-align: center;color: red; margin-top:5px;" id="qrCodeName"></div>
        <br/><!--往上抬一行-->
    </div>
<button id="downBtn">下载</button>
<script type="text/javascript">

var QRcodeName = "新零售POS考题";  
      
var qrcode = new QRCode(document.getElementById("qrCodeImg"), {
            text: "htttp://www.baidu.com",//二维码要传递的信息。这里传id用了base64加密
            width: 256,//二维码宽度
            height: 256,//二维码高度
            colorDark: "#000000",//前景色
            colorLight: "#ffffff",//背景色
            correctLevel: QRCode.CorrectLevel.H//二维码 容错级别
        });
        
	$("#qrCodeName").text('【'+QRcodeName+'】二维码');//添加二维码描述信息
      
 
	$("#downBtn").on("click", function(){
		downloadIamge(QRcodeName);//传二维码照片名 调用下载功能
	});
 
    //下载带边框的二维码核心 （html2canvas 元素转换照片）
    function downloadIamge(name) {
		//html2canvas核心 将id为canva的元素按页面布局制作成二维码
		html2canvas(document.getElementById('canva')).then(function (canvas) {
			var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // 获取生成的图片的url 　
			var saveLink = document.createElement('a');//临时创建二维码
			saveLink.href = imgUri;//二维码下载路径
			saveLink.download = name +'试卷二维码.png'//二维码名。传进来的
			saveLink.click();//模拟点击 执行下载
		});
	}

</script>
</body>
</html>